<template>
  <div class="left-box">
    <div class="left-box-item mobile-pay-amount">
      <Superscript :title="titleList[0]"></Superscript>
      <!--<TopDescription id="amount" :label="amountLabel" :info="mobilePayMount.amount"></TopDescription>-->
      <div class="pay-amount-top-box">
        <div class="pay-amount-top">
          <div class="pay-amount-top-left">
            <count id="interval-amount" :endVal="mobilePayMount.amount.yestoday"></count>
            <div class="des">{{amountLabel[0]}}</div>
          </div>
          <div class="pay-amount-top-right">
            <count id="yestoday-amount" :endVal="mobilePayMount.amount.interval" type="yellow"></count>
            <div class="des">{{amountLabel[1]}}<span class="rateLabel">环比</span><i :class="['fa',mobilePayMount.amount.rate > 0 ? 'fa-caret-up' : 'fa-caret-down']"></i><count size="mini" :inlineBlock="true" :endVal="mobilePayMount.amount.rate" :decimals="2" :type="mobilePayMount.amount.rate > 0 ? 'warning' : 'default'" unit="%" id="amount-rate"></count></div>
          </div>
        </div>
      </div>
      <MobilePayAmount id="mobile-pay-amount-wave" :xAxis="mobilePayMount.xAxis" :data="mobilePayMount.data"></MobilePayAmount>
    </div>
    <div class="left-box-item mobile-pay-count">
      <Superscript :title="titleList[1]"></Superscript>
      <!--<TopDescription id="count" :label="payCountLabel" :info="mobilePayCount.payCount"></TopDescription>-->
      <div class="pay-amount-top-box">
        <div class="pay-amount-top">
          <div class="pay-amount-top-left">
            <count id="interval-count" :endVal="mobilePayCount.amount.yestoday"></count>
            <div class="des">{{payCountLabel[0]}}</div>
          </div>
          <div class="pay-amount-top-right">
            <count id="yestoday-count" :endVal="mobilePayCount.amount.interval" type="yellow"></count>
            <div class="des">{{payCountLabel[1]}}<span class="rateLabel">环比</span><i :class="['fa',mobilePayCount.amount.rate > 0 ? 'fa-caret-up' : 'fa-caret-down']"></i><count size="mini" :inlineBlock="true" :endVal="mobilePayCount.amount.rate" :decimals="2" :type="mobilePayCount.amount.rate > 0 ? 'warning' : 'default'" unit="%" id="count-rate"></count></div>
          </div>
        </div>
      </div>
      <MobilePayCount id="mobile-pay-count-wave" :xAxis="mobilePayCount.xAxis" :data="mobilePayCount.data"></MobilePayCount>
    </div>
    <div class="left-box-item mobile-card-count">
      <Superscript :title="titleList[2]"></Superscript>
      <!--<TopDescription id="card-count" :label="cardCountLabel" :info="mobileCardCount.cardCount"></TopDescription>-->
      <div class="pay-amount-top-box">
        <div class="pay-amount-top">
          <div class="pay-amount-top-left">
            <count id="interval-card-count" :endVal="mobileCardCount.amount.yestoday"></count>
            <div class="des">{{cardCountLabel[0]}}</div>
          </div>
          <div class="pay-amount-top-right">
            <count id="yestoday-card-count" :endVal="mobileCardCount.amount.interval" type="yellow"></count>
            <div class="des">{{cardCountLabel[1]}}<span class="rateLabel">环比</span><i :class="['fa',mobileCardCount.amount.rate > 0 ? 'fa-caret-up' : 'fa-caret-down']"></i><count size="mini" :inlineBlock="true" :endVal="mobileCardCount.amount.rate" :decimals="2" :type="mobileCardCount.amount.rate > 0 ? 'warning' : 'default'" unit="%" id="card-count-rate"></count></div>
          </div>
        </div>
      </div>
      <MobileCardCount id="mobile-card-count-wave" :xAxis="mobileCardCount.xAxis" :data="mobileCardCount.data"></MobileCardCount>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import { Superscript, count, MobilePayAmount, MobilePayCount, MobileCardCount, TopDescription } from '../../../components'
  export default {
    components: {Superscript, count, MobilePayAmount, MobilePayCount, MobileCardCount, TopDescription},
    data () {
      return {
        titleList: ['移动支付金额', '移动支付笔数', '移动端领卡量'],
        amountLabel: ['昨日金额','实时金额' ],
        payCountLabel: ['昨日笔数','实时笔数'],
        cardCountLabel: ['昨日领卡量','实时领卡量']
      }
    },
    computed: {
      ...mapState(['mobilePayMount', 'mobilePayCount', 'mobileCardCount'])
    }
  }
</script>
<style lang="stylus" scoped>
  @import './index.styl';
</style>
